<template>
  <el-dialog :visible="showDialog" :title="title" width="600px" @close="handleClose" append-to-body
    :close-on-click-modal="false">
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="16"> <el-input class="search-box" type="text" prefix-icon="el-icon-search" size="small"
          placeholder="输入寺院名称搜索" v-model="queryParams.name">
        </el-input>
        <el-button size="mini" type="success" @click="getSiyuanList">查找</el-button>
      </el-col>
    </el-row>
    <!-- 客户列表 -->
    <el-table :data="userList" @change="handleRowClick" :row-class-name="tableRowClassName"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }" highlight-current-row ref="siyuanList">
      <!-- <el-table-column type="selection" width="55">
      </el-table-column> -->
      <!-- 单选框列 -->
      <el-table-column fixed label="选择" width="55" align="center">
        <template slot-scope="scope">
          <el-radio v-model="selectedId" :label="scope.row.id" @change="handleRadioChange(scope.row)">
            <span style="display: none;"></span>
          </el-radio>
        </template>
      </el-table-column>

      <el-table-column fixed prop="customerName" label="所属客户" align="center" width="120">
      </el-table-column>
      <el-table-column fixed prop="full_name" label="寺院名" align="center" width="120">
      </el-table-column>
      <el-table-column prop="industryCategoryName" label="所属片区" align="center" width="120">
      </el-table-column>
      <el-table-column prop="scaleName" label="寺院级别" align="center" width="120">
      </el-table-column>
      <el-table-column prop="address" label="寺院地址" align="center" width="120">
      </el-table-column>
      <el-table-column prop="contact_person" label="寺院联系人" align="center" width="120">
      </el-table-column>
      <el-table-column prop="contact_phone" label="寺院联系电话" align="center" width="120">
      </el-table-column>
      <el-table-column prop="contact_email" label="寺院邮箱" align="center" width="120">
      </el-table-column>
      <el-table-column prop="license_no" label="登记证号" align="center" width="120">
      </el-table-column>
      <el-table-column prop="license_img" align="center" label="登记证图片" width="120">
        <template v-slot="{ row }">
          <el-avatar v-if="row.license_img" :src="row.license_img" :size="30" />
        </template>
      </el-table-column>
      <el-table-column prop="logo" align="center" label="寺院主图" width="120">
        <template v-slot="{ row }">
          <el-avatar v-if="row.logo" :src="row.logo" :size="30" />
        </template>
      </el-table-column>
      <el-table-column prop="is_wenwu" label="是否文物" width="100">
        <template v-slot="{ row }">
          <span v-if="row.is_wenwu === 0"> 非文物</span>
          <span v-else-if="row.is_wenwu === 1"> 文物</span>
          <span v-else> 无</span>
        </template>
      </el-table-column>
      <el-table-column prop="is_huiyuan" label="会员单位" width="120">
        <template v-slot="{ row }">
          <span v-if="row.is_huiyuan === 0"> 非会员单位</span>
          <span v-else-if="row.is_huiyuan === 1"> 会员单位</span>
          <span v-else> 无</span>
        </template>
      </el-table-column>
      <el-table-column prop="siyuan_label" label="寺院标签" align="center" width="120">
      </el-table-column>
      <el-table-column prop="createtime" label="创建时间" align="center" width="100">
      </el-table-column>
    </el-table>
    <!-- 底部按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="handleClose">取消</el-button>
      <el-button type="primary" size="mini" @click="confirmSelection">确定</el-button>
    </div>
    <div class="pagination">
      <el-pagination @size-change="changePageSize" @current-change="changePageIndex"
        :current-page="queryParams.pageIndex" :page-sizes="[10, 20]" :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="userTotal">
      </el-pagination>
    </div>
  </el-dialog>
</template>

<script>
import { getSiyuanList } from '@/api/siyuan';
export default {
  name: 'siyuanList',
  model: {
    prop: 'showDialog', // 父组件传递的 prop 名称
    event: 'input'      // 父组件监听的事件名称
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '寺院列表'
    }
  },
  watch: {
    showDialog(newVal) {
      if (newVal) {
        this.getSiyuanList(); // 每次打开弹层时重新加载数据
        this.selectedId = null; // 清空选中状态
      }
    }
  },
  data() {
    return {
      customerId: null,
      selectedId: null,
      // 用户总记录数
      userTotal: 0,
      userList: [],
      // 查询参数
      queryParams: {
        pageIndex: 0,
        pageSize: 10,
        name: ''
      },
    };
  },
  methods: {
    async getSiyuanList() {
      const { data, total } = await getSiyuanList(this.queryParams)

      this.userList = data
      this.userTotal = total
    },
    // 关闭弹层
    handleClose() {
      this.$emit('input', false); // 触发 v-model 更新，关闭弹层
      this.selectedId = null;
      // 清空表格的当前选中行
      if (this.$refs.siyuanList) {
        this.$refs.siyuanList.setCurrentRow(null);
      }
    },
    // 处理行点击事件
    handleRowClick(row) {
      if (!row || !row.id) {
        console.warn('无效的行数据:', row);
        return;
      }
      this.selectedId = row.id;

    },
    // 处理单选框变化事件
    handleRadioChange(row) {

      if (!row || !row.id) {
        console.warn('无效的行数据:', row);
        return;
      }
      this.selectedId = row.id; // 设置当前选中的行 ID
    },
    // 确认选择
    confirmSelection() {

      if (this.selectedId) {
        const selectedRow = this.userList.find(item => item.id === this.selectedId);
        this.$emit('submit', selectedRow); // 将选中的行数据传递给父组件
        this.handleClose();               // 关闭弹层
      } else {
        this.$message.warning('请先选择一个寺院');
      }
    },
    tableRowClassName({ row, rowIndex }) {
      // 判断是否是偶数行（索引从 0 开始）
      if (rowIndex % 2 === 1) {
        return 'even-row'; // 偶数行的类名
      }
      return ''; // 其他行不添加类名
    },
    changePageIndex(newPageIndex) {
      //切换页数
      this.queryParams.pageIndex = newPageIndex - 1
      this.getSiyuanList()
    },
    changePageSize(newPageSize) {
      //切换条数
      this.queryParams.pageSize = newPageSize
      //切换条数 页数默认置0
      this.queryParams.pageIndex = 0
      this.getSiyuanList()
    },
    hasPermission(permissionCode) {
      // 假设用户的权限列表存储在 Vuex 或组件状态中

      const userPermissions = this.$store.state.user.userInfo?.powers || [] // 示例：['03004', '03005']
      const hasPermission = userPermissions.some(point => point.code === permissionCode);

      return hasPermission;
    },
  }
};
</script>

<style scoped>
/* 可以在这里添加样式 */
.search-box {
  width: 280px;
  /* 设置宽度 */
  height: 20px;
  /* 设置高度 */
  line-height: 20px;
  margin-bottom: 20px;
  margin-right: 10px;
  /* 确保输入框内容垂直居中 */
  font-size: 12px;
  /* 调整字体大小以适应高度 */
}

.col-item {
  margin-bottom: 10px;
}

.pagination {
  margin-top: 20px;
}
</style>